<template>
    <div>
        <!-- <h1>短信登入</h1> -->
         <el-form  ref="messageLoginForm" :model="messageFormData"
                status-icon  :rules="messageRules"  label-width="120px"
                class="demo-messageFormData" >
                <!--输入手机号  -->
                <el-form-item label="手机号" prop="phone" class="c-form-item" maxlength="11"> 
               
               <el-input v-model="messageFormData.phone" />
               <div class="code1" @click="sendSms">{{desc}}</div>
               </el-form-item>
                <el-form-item label="验证码" prop="code" class="u-form-item" maxlength="5">
                    <el-input  v-model="messageFormData.code" type="text"    autocomplete="off"/>
                </el-form-item>
                
                <el-form-item class="u-form-item">

                    <el-button type="primary" @click="submitForm(messageLoginForm)">提交</el-button>
                    
                    
                    
                </el-form-item>
         </el-form>

    </div>
        

</template>
<script setup>
  import { reactive, ref ,onUnmounted} from 'vue'
  import {messageRules, useSubmitForm} from "../../componsition/login/validate"

  import * as api from "@/api/users";

//   引入路由对象
import {useRouter} from "vue-router"

// 引入消息弹窗
import { ElMessage } from 'element-plus'

// 引入store
import {useUser} from "@/store/users.js"

// 引入loading动画
import { ElLoading } from 'element-plus' 

let router =useRouter()

// 使用 store
let userStore =useUser()
  

  const messageLoginForm = ref()

//   校验函数
//表单校验成功之后，回调的方法
let validateSuccess=async()=>{
    console.log("校验成功")
    
    // 发起登入请求的时候加载loading动画
    let loadingInstance=ElLoading.service({
    text:"正在加载...",
    background:"rgba(0,0,0,.4)"
   })

    // 发送短信登入的请求

    try{
        let res=await api.messageApi(messageFormData.code)
      

        // console.log(res)
        // 储存token,存到绘画存储里面
        sessionStorage.setItem("whc-token",res.data.token)

        // 储存用户信息
        userStore.$patch({
            userInfo: res.data.userInfo
        })
        // 页面跳转
        router.push("/")
    }catch(e){
        console.log(e)
        loadingInstance.close()

    }





}
//表单校验失败，回调的方法
let validateFailed=()=>{
    console.log("校验失败")
}
  

// 使用submitForm
let submitForm =useSubmitForm(validateSuccess,validateFailed)


  
  const messageFormData = reactive({
   phone: '',
    code: '',
  })
  

  

  
  const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
  }


//   声明一个响应式变量，改变按钮中间的文字
let desc =ref("点击发送")

// 引用定时器，便于组件卸载的时候，清楚定时器
let timeDownInterval =null;

// 应用开关的思路
// 初始值用户未点击
let isClick =false;

  let sendSms=async()=>{
    if(!isClick){
        
    // 发起获取手机验证码的请求
    try{
       let res=await api.getMessage(messageFormData.phone);
    //    给消息提示
        ElMessage({
        message: '短信验证码发送',
        type: 'success', })
       console.log(res)
       // 调用倒计时函数
        timeDownInterval= timeDown(10,desc,"秒后发送",desc.value,()=>{
        // 让点击状态isClick恢复到未点击
        isClick=false
    })

    }catch(e){
        // 将按钮的开关重置
        isClick=false
        // console.log(e)
        ElMessage({
        message: e,
        type: 'error',
    })
        return
    }
   
        
    }

    // 标记isClick已经被点击了
    isClick=true;
    // 调用倒计时传入俩个参数 一个倒计时的事件 另一个需要变更的响应式
    
  }

// 短信倒计时方法
/**
 * 
 * @param {number} timer 一个倒计时的事件
 * @param {object} param 另一个需要变更的响应式
 * @param {Sring} msg 倒计时描述的文字
 * @param {Sring} endMsg 倒计时结束之后的文字
 * @param {funtion} cb 倒计时结束之后的回调的函数
 */


//字符串.padStart("希望几位数"，"用什么字符去补") 


let timeDown =(timer=5,param,msg,endMsg,cb)=>{
    let count = timer
    // 一调用定时器就显示倒计时的秒数
    param.value =(count+"").padStart(2,0)+msg;
    let interval =setInterval(() => {
        count--
        
        if(count<=0){
            clearInterval(interval)
            param.value=endMsg

            cb &&cb()
            return
        }
        param.value=(count+"").padStart(2,0) + msg;
    }, 1000);

    // 返回定时器的应用
    return interval
}

onUnmounted(()=>{
    loadingInstance &&loadingInstance.close()
    console.log("组件被卸载了")
    // 如果定时器存在，组件卸载的时候需要清楚定时器
    if(timeDownInterval) clearInterval(timeDownInterval)
})




  </script>

<style lang="less" scoped>
        

.u-form-item{
    color: white !important;
    .el-input{
        width: 200px !important;
    }
    .el-button{
        width: 200px !important ;

    }
    :deep(.el-form-item__label){
        color:white
    }
   a{
  
    margin:10px 0  0 55px ;
   }
   

}
.c-form-item{
    .el-input{
        width: 130px !important; 
       
    }
    :deep(.el-input__wrapper){
        border-radius: 4px 0 0 4px;
        box-shadow: none;
    }
    :deep(.el-form-item__label){
        color:white
    }
    
    .code1{
        width: 70px;
        height: 32px;
        font-size: 10px;
        // border: 1px solid;
        background-color: white;
        border-radius: 0 4px 4px 0;
        text-decoration: underline;
        cursor: pointer;

        
    }
  
}

.loginOline{
    width: 400px;
    height: 550px;
    background-color: rgba(0,0,0, .3);
    position: fixed;
    right: 10%;
    top: 25%;
    
   
    h1{
        padding: 90px 0  20px 0;
        text-align: center;
        color: white ;
    }


   
}












</style>

